React 배치(Batching): 상태 업데이트 최적화로 성능 향상하기

끊임없이 발전하는 웹 개발 환경에서 애플리케이션 성능 최적화는 매우 중요합니다. 사용자 인터페이스 구축을 위한 선도적인 자바스크립트 라이브러리인 React는 효율성을 높이기 위한 여러 메커니즘을 제공합니다. 그중 하나가 바로 종종 보이지 않는 곳에서 작동하는 배치(batching)입니다. 이 글에서는 React 배치의 개념, 이점, 한계, 그리고 더 부드럽고 반응성 좋은 사용자 경험을 제공하기 위한 상태 업데이트 최적화 고급 기법에 대해 종합적으로 탐구합니다.

React 배치란 무엇인가?

React 배치는 React가 여러 상태 업데이트를 하나의 리렌더링으로 그룹화하는 성능 최적화 기법입니다. 즉, 각 상태 변경마다 컴포넌트를 여러 번 리렌더링하는 대신, React는 모든 상태 업데이트가 완료될 때까지 기다렸다가 단일 업데이트를 수행합니다. 이는 리렌더링 횟수를 크게 줄여 성능을 개선하고 사용자 인터페이스의 반응성을 높입니다.

React 18 이전에는 배치가 React 이벤트 핸들러 내에서만 발생했습니다. setTimeout, 프로미스(promise), 네이티브 이벤트 핸들러 내의 상태 업데이트와 같이 이러한 핸들러 외부의 상태 업데이트는 배치 처리되지 않았습니다. 이로 인해 예기치 않은 리렌더링과 성능 병목 현상이 종종 발생했습니다.

React 18에 자동 배치가 도입되면서 이 한계가 극복되었습니다. 이제 React는 다음과 같은 더 많은 시나리오에서 상태 업데이트를 자동으로 배치합니다:

• React 이벤트 핸들러 (예: onClick, onChange)
• 비동기 자바스크립트 함수 (예: setTimeout, Promise.then)
• 네이티브 이벤트 핸들러 (예: DOM 요소에 직접 연결된 이벤트 리스너)

React 배치의 이점

React 배치의 이점은 상당하며 사용자 경험에 직접적인 영향을 미칩니다:

• 성능 향상: 리렌더링 횟수를 줄이면 DOM을 업데이트하는 데 소요되는 시간이 최소화되어 렌더링이 빨라지고 UI 반응성이 향상됩니다.
• 리소스 소비 감소: 리렌더링 횟수가 줄어들면 CPU 및 메모리 사용량이 감소하여 모바일 기기의 배터리 수명이 길어지고 서버 측 렌더링을 사용하는 애플리케이션의 서버 비용이 절감됩니다.
• 사용자 경험 향상: 더 부드럽고 반응성이 좋은 UI는 전반적인 사용자 경험을 개선하여 애플리케이션을 더 세련되고 전문적으로 보이게 합니다.
• 코드 단순화: 자동 배치는 수동 최적화 기법의 필요성을 제거하여 개발을 단순화하므로, 개발자는 성능 미세 조정보다는 기능 구축에 집중할 수 있습니다.

React 배치의 작동 방식

React의 배치 메커니즘은 조정(reconciliation) 프로세스에 내장되어 있습니다. 상태 업데이트가 트리거되면 React는 즉시 컴포넌트를 리렌더링하지 않습니다. 대신 업데이트를 큐에 추가합니다. 짧은 시간 내에 여러 업데이트가 발생하면 React는 이를 단일 업데이트로 통합합니다. 그런 다음 이 통합된 업데이트를 사용하여 컴포넌트를 한 번만 리렌더링하여 모든 변경 사항을 한 번에 반영합니다.

간단한 예시를 살펴보겠습니다:

            
import React, { useState } from 'react';

function ExampleComponent() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  const handleClick = () => {
    setCount1(count1 + 1);
    setCount2(count2 + 1);
  };

  console.log('Component re-rendered');

  return (
    <div>
      <p>Count 1: {count1}</p>
      <p>Count 2: {count2}</p>
      <button onClick={handleClick}>Increment Both</button>
    </div>
  );
}

export default ExampleComponent;

            

              
                Copy
              
            
          

이 예시에서 버튼을 클릭하면 setCount1과 setCount2가 동일한 이벤트 핸들러 내에서 호출됩니다. React는 이 두 상태 업데이트를 배치 처리하고 컴포넌트를 단 한 번만 리렌더링합니다. 콘솔에는 클릭당 한 번만 "Component re-rendered"가 기록되어 배치가 작동하는 것을 보여줍니다.

배치되지 않는 업데이트: 배치가 적용되지 않는 경우

React 18에서는 대부분의 시나리오에 자동 배치가 도입되었지만, 배치를 우회하고 React가 즉시 컴포넌트를 업데이트하도록 강제하고 싶은 상황이 있을 수 있습니다. 이는 일반적으로 상태 업데이트 직후 업데이트된 DOM 값을 읽어야 할 때 필요합니다.

React는 이를 위해 flushSync API를 제공합니다. flushSync는 React가 보류 중인 모든 업데이트를 동기적으로 플러시하고 즉시 DOM을 업데이트하도록 강제합니다.

다음은 예시입니다:

            
import React, { useState } from 'react';
import { flushSync } from 'react-dom';

function ExampleComponent() {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    flushSync(() => {
      setText(event.target.value);
    });
    console.log('Input value after update:', event.target.value);
  };

  return (
    <input type="text" value={text} onChange={handleChange} />
  );
}

export default ExampleComponent;

            

              
                Copy
              
            
          

이 예시에서는 flushSync를 사용하여 입력 값이 변경된 직후 text 상태가 업데이트되도록 합니다. 이를 통해 다음 렌더링 주기를 기다리지 않고 handleChange 함수에서 업데이트된 값을 읽을 수 있습니다. 하지만 flushSync는 성능에 부정적인 영향을 미칠 수 있으므로 신중하게 사용해야 합니다.

고급 최적화 기법

React 배치가 상당한 성능 향상을 제공하지만, 애플리케이션의 성능을 더욱 향상시키기 위해 사용할 수 있는 추가적인 최적화 기법이 있습니다.

1. 함수형 업데이트 사용하기

이전 값을 기반으로 상태를 업데이트할 때는 함수형 업데이트를 사용하는 것이 가장 좋습니다. 함수형 업데이트는 특히 비동기 작업이나 배치 업데이트가 포함된 시나리오에서 가장 최신 상태 값으로 작업하고 있음을 보장합니다.

다음 대신:

            
setCount(count + 1);

            

              
                Copy
              
            
          

다음을 사용하세요:

            
setCount((prevCount) => prevCount + 1);

            

              
                Copy
              
            
          

함수형 업데이트는 오래된 클로저(stale closures)와 관련된 문제를 방지하고 정확한 상태 업데이트를 보장합니다.

2. 불변성

상태를 불변(immutable)으로 취급하는 것은 React에서 효율적인 렌더링을 위해 매우 중요합니다. 상태가 불변일 때, React는 이전 상태와 새 상태 값의 참조를 비교하여 컴포넌트를 리렌더링해야 하는지 신속하게 판단할 수 있습니다. 참조가 다르면 React는 상태가 변경되었음을 알고 리렌더링이 필요하다고 판단합니다. 참조가 같다면 React는 리렌더링을 건너뛰어 귀중한 처리 시간을 절약할 수 있습니다.

객체나 배열로 작업할 때 기존 상태를 직접 수정하지 마세요. 대신, 원하는 변경 사항을 적용한 객체나 배열의 새 복사본을 만드세요.

예를 들어, 다음 대신:

            
const updatedItems = items;
updatedItems.push(newItem);
setItems(updatedItems);

            

              
                Copy
              
            
          

다음을 사용하세요:

            
setItems([...items, newItem]);

            

              
                Copy
              
            
          

전개 연산자(...)는 기존 항목과 새 항목이 끝에 추가된 새 배열을 만듭니다.

3. 메모이제이션(Memoization)

메모이제이션은 비용이 많이 드는 함수 호출 결과를 캐싱하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환하는 강력한 최적화 기법입니다. React는 React.memo, useMemo, useCallback을 포함한 여러 메모이제이션 도구를 제공합니다.

• React.memo: 함수형 컴포넌트를 메모이제이션하는 고차 컴포넌트(HOC)입니다. props가 변경되지 않았다면 컴포넌트가 리렌더링되는 것을 방지합니다.
• useMemo: 함수의 결과를 메모이제이션하는 훅입니다. 의존성이 변경될 때만 값을 다시 계산합니다.
• useCallback: 함수 자체를 메모이제이션하는 훅입니다. 의존성이 변경될 때만 변경되는 메모이제이션된 버전의 함수를 반환합니다. 이는 자식 컴포넌트에 콜백을 전달하여 불필요한 리렌더링을 방지하는 데 특히 유용합니다.

다음은 React.memo를 사용하는 예시입니다:

            
import React from 'react';

const MyComponent = React.memo(({ data }) => {
  console.log('MyComponent re-rendered');
  return <div>{data.name}</div>;
});

export default MyComponent;

            

              
                Copy
              
            
          

이 예시에서 MyComponent는 data prop이 변경될 경우에만 리렌더링됩니다.

4. 코드 스플리팅(Code Splitting)

코드 스플리팅은 애플리케이션을 필요에 따라 로드할 수 있는 더 작은 청크로 나누는 관행입니다. 이는 초기 로드 시간을 줄이고 애플리케이션의 전반적인 성능을 향상시킵니다. React는 동적 import와 React.lazy 및 Suspense 컴포넌트를 포함하여 코드 스플리팅을 구현하는 여러 방법을 제공합니다.

다음은 React.lazy와 Suspense를 사용하는 예시입니다:

            
import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

이 예시에서 MyComponent는 React.lazy를 사용하여 비동기적으로 로드됩니다. Suspense 컴포넌트는 컴포넌트가 로드되는 동안 폴백(fallback) UI를 표시합니다.

5. 가상화(Virtualization)

가상화는 큰 목록이나 테이블을 효율적으로 렌더링하는 기법입니다. 모든 항목을 한 번에 렌더링하는 대신, 가상화는 현재 화면에 보이는 항목만 렌더링합니다. 사용자가 스크롤하면 새 항목이 렌더링되고 이전 항목은 DOM에서 제거됩니다.

react-virtualized 및 react-window와 같은 라이브러리는 React 애플리케이션에서 가상화를 구현하기 위한 컴포넌트를 제공합니다.

6. 디바운싱(Debouncing)과 스로틀링(Throttling)

디바운싱과 스로틀링은 함수가 실행되는 빈도를 제한하는 기법입니다. 디바운싱은 특정 비활성 기간이 지난 후에 함수 실행을 지연시킵니다. 스로틀링은 주어진 시간 내에 함수를 최대 한 번만 실행합니다.

이러한 기법은 스크롤 이벤트, 리사이즈 이벤트, 입력 이벤트와 같이 빠르게 발생하는 이벤트를 처리하는 데 특히 유용합니다. 이러한 이벤트를 디바운싱하거나 스로틀링함으로써 과도한 리렌더링을 방지하고 성능을 향상시킬 수 있습니다.

예를 들어, lodash.debounce 함수를 사용하여 입력 이벤트를 디바운싱할 수 있습니다:

            
import React, { useState, useCallback } from 'react';
import debounce from 'lodash.debounce';

function ExampleComponent() {
  const [text, setText] = useState('');

  const handleChange = useCallback(
    debounce((event) => {
      setText(event.target.value);
    }, 300),
    []
  );

  return (
    <input type="text" onChange={handleChange} />
  );
}

export default ExampleComponent;

            

              
                Copy
              
            
          

이 예시에서 handleChange 함수는 300밀리초의 지연으로 디바운싱됩니다. 이는 사용자가 300밀리초 동안 타이핑을 멈춘 후에만 setText 함수가 호출된다는 것을 의미합니다.

실제 사례 및 케이스 스터디

React 배치 및 최적화 기법의 실제적인 영향을 설명하기 위해 몇 가지 실제 사례를 살펴보겠습니다:

• 전자 상거래 웹사이트: 복잡한 상품 목록 페이지가 있는 전자 상거래 웹사이트는 배치로부터 상당한 이점을 얻을 수 있습니다. 여러 필터(예: 가격 범위, 브랜드, 평점)를 동시에 업데이트하면 여러 상태 업데이트가 트리거될 수 있습니다. 배치는 이러한 업데이트가 단일 리렌더링으로 통합되도록 하여 상품 목록의 반응성을 향상시킵니다.
• 실시간 대시보드: 자주 업데이트되는 데이터를 표시하는 실시간 대시보드는 배치를 활용하여 성능을 최적화할 수 있습니다. 데이터 스트림의 업데이트를 배치 처리함으로써 대시보드는 불필요한 리렌더링을 피하고 부드럽고 반응성이 좋은 사용자 인터페이스를 유지할 수 있습니다.
• 대화형 양식: 여러 입력 필드와 유효성 검사 규칙이 있는 복잡한 양식도 배치의 이점을 누릴 수 있습니다. 여러 양식 필드를 동시에 업데이트하면 여러 상태 업데이트가 트리거될 수 있습니다. 배치는 이러한 업데이트가 단일 리렌더링으로 통합되도록 하여 양식의 반응성을 향상시킵니다.

배치 문제 디버깅하기

배치가 일반적으로 성능을 향상시키지만, 배치와 관련된 문제를 디버깅해야 하는 시나리오가 있을 수 있습니다. 다음은 배치 문제를 디버깅하기 위한 몇 가지 팁입니다:

• React 개발자 도구 사용: React 개발자 도구를 사용하면 컴포넌트 트리를 검사하고 리렌더링을 모니터링할 수 있습니다. 이를 통해 불필요하게 리렌더링되는 컴포넌트를 식별하는 데 도움이 됩니다.
• console.log 문 사용: 컴포넌트 내에 console.log 문을 추가하면 컴포넌트가 언제 리렌더링되는지, 무엇이 리렌더링을 유발하는지 추적하는 데 도움이 될 수 있습니다.
• why-did-you-update 라이브러리 사용: 이 라이브러리는 이전 및 현재 props와 상태 값을 비교하여 컴포넌트가 리렌더링되는 이유를 식별하는 데 도움을 줍니다.
• 불필요한 상태 업데이트 확인: 상태를 불필요하게 업데이트하고 있지 않은지 확인하세요. 예를 들어, 동일한 값을 기반으로 상태를 업데이트하거나 모든 렌더링 주기에서 상태를 업데이트하는 것을 피하세요.
• flushSync 사용 고려: 배치가 문제를 일으킨다고 의심되는 경우 flushSync를 사용하여 React가 즉시 컴포넌트를 업데이트하도록 시도해 보세요. 하지만 flushSync는 성능에 부정적인 영향을 미칠 수 있으므로 신중하게 사용해야 합니다.

상태 업데이트 최적화를 위한 모범 사례

요약하자면, 다음은 React에서 상태 업데이트를 최적화하기 위한 몇 가지 모범 사례입니다:

• React 배치 이해하기: React 배치가 어떻게 작동하는지, 그리고 그 이점과 한계를 인지하세요.
• 함수형 업데이트 사용하기: 이전 값을 기반으로 상태를 업데이트할 때는 함수형 업데이트를 사용하세요.
• 상태를 불변으로 취급하기: 상태를 불변으로 취급하고 기존 상태 값을 직접 수정하지 마세요.
• 메모이제이션 사용하기: React.memo, useMemo, useCallback을 사용하여 컴포넌트와 함수 호출을 메모이제이션하세요.
• 코드 스플리팅 구현하기: 코드 스플리팅을 구현하여 애플리케이션의 초기 로드 시간을 줄이세요.
• 가상화 사용하기: 가상화를 사용하여 큰 목록과 테이블을 효율적으로 렌더링하세요.
• 이벤트 디바운싱 및 스로틀링하기: 빠르게 발생하는 이벤트를 디바운싱하고 스로틀링하여 과도한 리렌더링을 방지하세요.
• 애플리케이션 프로파일링하기: React Profiler를 사용하여 성능 병목 현상을 식별하고 그에 따라 코드를 최적화하세요.

결론

React 배치는 React 애플리케이션의 성능을 크게 향상시킬 수 있는 강력한 최적화 기법입니다. 배치가 어떻게 작동하는지 이해하고 추가적인 최적화 기법을 사용함으로써 더 부드럽고, 반응성이 좋으며, 더 즐거운 사용자 경험을 제공할 수 있습니다. 이러한 원칙을 받아들이고 React 개발 관행에서 지속적인 개선을 위해 노력하세요.

이러한 가이드라인을 따르고 애플리케이션의 성능을 지속적으로 모니터링함으로써, 전 세계 사용자가 사용하기에 효율적이고 즐거운 React 애플리케이션을 만들 수 있습니다.